<template>
	<view class="priceRight">
		<view class="priceRightUp">
			距离结束仅剩2天
		</view>
		<view class="priceRightDown">
			<text class="time">08</text>:
			<text class="time">50</text>:
			<text class="time">10</text>
		</view>
	</view>			
</template>

<script>
	export default {
		data() {
			return {
				days: '0',
				hours: '00',
				mins: '00',
				seconds: '00',
				timer: null,
				curTime: 0	
			};
		},
		computed:{
			duration() {
			      if (this.end) {
			        let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000;
			        end -= Date.now();
			        return end;
			      }
			      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
			      return time;
			    }
			
		},
		mounted() {
			this.countDown();
		},
		watch:{
			duration() {
			    this.countDown();
			},
			refreshCounter() {
			    this.countDown();
			}
		},
		methods:{
			durationFormatter(time) {
			      if (!time) return { ss: 0 };
			      let t = time;
			      const ss = t % 60;
			      t = (t - ss) / 60;
			      if (t < 1) return { ss };
			      const mm = t % 60;
			      t = (t - mm) / 60;
			      if (t < 1) return { mm, ss };
			      const hh = t % 24;
			      t = (t - hh) / 24;
			      if (t < 1) return { hh, mm, ss };
			      const dd = t;
			      return { dd, hh, mm, ss };
			    },
			countDown() {
			      // eslint-disable-next-line no-unused-expressions
			      this.curTime = Date.now();
			      this.getTime(this.duration);
			    },
			 getTime(time) {
			      // eslint-disable-next-line no-unused-expressions
			      this.timer && clearTimeout(this.timer);
			      if (time < 0) {
			        return;
			      }
			      // eslint-disable-next-line object-curly-newline
			      const { dd, hh, mm, ss } = this.durationFormatter(time);
			      this.days = dd || 0;
			      // this.hours = `00${hh || ''}`.slice(-2);
			      // this.mins = `00${mm || ''}`.slice(-2);
			      // this.seconds = `00${ss || ''}`.slice(-2);
			      this.hours = hh || 0;
			      this.mins = mm || 0;
			      this.seconds = ss || 0;
			      this.timer = setTimeout(() => {
			        const now = Date.now();
			        const diffTime = Math.floor((now - this.curTime) / 1000);
			        const step = diffTime > 1 ? diffTime : 1; // 页面退到后台的时候不会计时，对比时间差，大于1s的重置倒计时
			        this.curTime = now;
			        this.getTime(time - step);
			      }, 1000);
		}
	}
	}
</script>

<style lang="stylus">
	.priceRight
		display flex
		flex-direction column
		align-items center
		justify-content center
		width 40%
		height 130rpx
		background-color #E3A865
		.priceRightUp
			width 250rpx
			height 40rpx
			font-size 28rpx
			text-align center
			// background-color #007AFF
		.priceRightDown
			display flex
			flex-direction row
			align-items center
			justify-content center
			width 250rpx
			height 60rpx
			// background-color #aaaaff
			.time
				display inline-block
				width 50rpx
				height 60rpx
				text-align center
				line-height 60rpx
				border-radius 10rpx
				background-color #FFFFFF
</style>
